<template>
  <a-modal
          title="跳转链接"
          :width="900"
          style="top: 20px;"
          :bodyStyle="{maxHeight:'500px','overflowY':'scroll'}"
          v-model="formData[visibleField]"
          @ok="formData[visibleField]=false"
  >
    <a-spin :spinning="saveLoading">

      <a-row :gutter="8">
        <a-col :span="4">
        <a-tabs @change="typeChange" defaultActiveKey="0"  tabPosition="left" :style="{ height: '300px'}">
          <a-tab-pane :tab="type.name"   v-for="type in typeList" :key="type.key"></a-tab-pane>
        </a-tabs>
          </a-col>

        <a-col :span="20">

          <a-input-search
                  v-model="queryParam.keywords"
                  @search="onSearch"
                  placeholder="搜索关键字"
                  style="width: 100%; margin-bottom: 1rem"
          />
        <a-table :columns="columns" :dataSource="contentList" :pagination="false" rowKey="id" :scroll="{ y: 300 }" bordered>
            <span slot="title1" slot-scope="title,record">
              {{record.title}}
            </span>
          <template slot="action" slot-scope="text,record,index">
              <a @click="onSelect(record)" href="javascript:;">选择</a>
          </template>
        </a-table>
          </a-col>
        </a-row>
    </a-spin>
  </a-modal>

</template>
<script>
  import { urlPickerList } from '@/api/page'
  export default {
    name: 'UrlPicker',
    data () {
      return {
        saveLoading:false,
        queryParam:{
          'type' : 'goods'
        },
        typeList:[
          {
            'name' :'商品',
            'type' :'goods',
            'key' : 0,
          },
          {
            'name' :'商品分类',
            'type' :'goodsCate',
            'key' : 1,
          },
          {
            'name' :'文章',
            'type' : 'cmsContent',
            'key' : 2
          },
          {
            'name' :'门店',
            'type' : 'shop',
            'key' : 3
          },
          {
            'name' :'优惠券',
            'type' : 'coupon',
            'key' : 4
          },
          {
            'name' :'砍价',
            'type' : 'kanjia',
            'key' : 5
          },
          {
            'name' :'拼团',
            'type' : 'tuan',
            'key' : 6
          },
          {
            'name' :'接龙',
            'type' : 'jielong',
            'key' : 7
          },
          {
            'name' :'瓜分券',
            'type' : 'guafen',
            'key' : 8
          },
          {
            'name' :'抽奖',
            'type' : 'luck',
            'key' : 9
          }
        ],
        contentList:[
        ],
        columns: [
          {
            title: '#',
            dataIndex: 'id',
            width: '150px'
          },
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'title1' },
          },
          {
            title: '选择',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' },
          }
        ],
      }
    },
    props: {
      visibleField:{
        type: String|Number,
        required: true
      },
      formData:{
        type: Object,
        required: true
      },
      field:{
        type: String|Number,
        required: true
      },
    },
    created(){
      let that = this;
      that.load();
    },
    methods: {
      load(){
        let that = this;
        urlPickerList(that.queryParam).then((res) => {
          that.contentList = res.data;
        })
      },
      typeChange(index){
        let that = this;
        that.queryParam.type =  that.typeList[index].type
        that.load();
      },
      onSearch(){
        let that = this;
        that.load();
      },
      onSelect(record){
        this.formData[this.field] = record.url;
        this.formData[this.visibleField]=false;
      }
    },
  }
</script>
<style>

</style>